{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>创享博客</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="icon" href="./favicon.ico">
    {#    <link rel="stylesheet" href="{% static 'background/css/weadmin.css' %}" type="text/css">#}
    <link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}">

    <link rel="stylesheet" href="{% static 'lib/font-awesome/css/font-awesome.min.css' %}">

    <link rel="stylesheet" href="{% static 'css/stage.css' %}">

    <link rel="stylesheet" href="{% static 'css/avatar-bg.css' %}">

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="{% static 'background/css/font.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static 'background/lib/layui/css/layui.css' %}">
    {#        <link rel="stylesheet" href="{% static 'background/css/weadmin.css' %}" type="text/css">#}
    <style>
        .layui-layer-hui .layui-layer-content {
            color: #ffffff;
        }
    </style>
</head>
</head>

<body>
<header id="header">
    <nav id="common-nav" class="navbar-fixed-top" style="background-color: #2C674B" style="color:white">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" style="margin-top: -5px;" href="/">
                    <img class="navbar-logo" src="{% static 'images/icon.png' %}" height="30" width="30"/></a>
                <a class="navbar-brand" style="color: white;margin-top: 0px;" href="/">创享博客</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <img id="photo" src="/static/images/headProtraitSmall.png" height="25" width="25"
                             style="margin-top: 15px" onclick="location.href='/person'"/>
                    </li>
                    <li>
                        {#                        <a href="#" style="color: white">Name</a>#}
                        <a class="a globalLoginBtn" href="#" style="color: white">登录/注册</a>
                    </li>
                    <li>
                        <a href="#" style="color: white; display: none" id="logout">注销</a>
                    </li>
                </ul>
                <form class="navbar-form navbar-right" action="/home" id="cse-search-box"
                      style="margin-top: 10px">
                    <input name="title" type="search" class="form-control input-sm" placeholder="标题">
                    <input name="classify" type="search" class="form-control input-sm" placeholder="分类">
                    <input type="submit" style="display:block;overflow:hidden;width:0px;height:0px;position:absolute">
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="/" style="color: white">主页</a>
                    </li>
                    <li>
                        <a href="/home" style="color: white">博客</a>
                    </li>
                    <li><a href="/login" style="color: white">后台管理</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div class="header-main">
    </div>
    <div id="nav">
        <div class="nav-img" id="nav-img"></div>
    </div>
</header>

<div id="content-outer">
    <div id="content-inner">
        <div class="clearfix">

            <div id="top-item" style="width: 495px;background-color: white;float: left;padding-top: 5px">

                <div class="post-item">
                    <span style="font-size: 25px;padding-bottom: 7px;padding-top:20px;font-weight: 600;border-bottom: 0 none;margin-top: 0">
                        <a href="#" style="color: black;margin-top: 7px">热门</a>
                    </span>

                    <div>
                        <h5 style="margin-bottom: 0;padding-bottom: 5px">
                            <a id="top1" href="#" style=" color: black">● Vue技术栈源码学习</a>
                        </h5>
                        <span id="top-date1" style="color: #9A9A9A;margin-left: 10px">2020-05-25</span>
                        <p id="top-content1" style="margin:5px 0;padding:0;margin-left:10px;color: #2F2F2F">最近在学习 Vue
                            技术栈的源码。还在不断更新中，欢迎来提意见。</p>

                        <div style="margin-bottom:35px;margin-left: -10px">
                            <div class="col-md-2">
                                <img id="top-image1" src="{% static 'images/headProtraitSmall.png' %}" height="25"
                                     width="25"/>
                            </div>
                            <a id="top-author1" href="#"
                               style="color: black;margin-top: 10px;margin-left: -20px;width: auto"
                               class="col-md-1">李四</a>
                            <div id="top-view1" class="col-md-4" style="color: #2F2F2F;margin-top: 10px;float: right">
                                <span>阅读</span>
                                <span>370</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="post-item">
                    <div>
                        <h5 style="margin-bottom: 0;padding-bottom: 5px">
                            <a id="top2" href="#" style=" color: black">● Vue技术栈源码学习</a>
                        </h5>
                        <span id="top-date2" style="color: #9A9A9A;margin-left: 10px">2020-05-25</span>
                        <p id="top-content2" style="margin:5px 0;padding:0;margin-left:10px;color: #2F2F2F">最近在学习 Vue
                            技术栈的源码。还在不断更新中，欢迎来提意见。</p>

                        <div style="margin-bottom:35px;margin-left: -10px">
                            <div class="col-md-2">
                                <img id="top-image2" src="{% static 'images/headProtraitSmall.png' %}" height="25"
                                     width="25"/>
                            </div>
                            <a id="top-author2" href="#"
                               style="color: black;margin-top: 10px;margin-left: -20px;width: auto"
                               class="col-md-1">Name</a>
                            <div id="top-view2" class="col-md-4" style="color: #2F2F2F;margin-top: 10px;float: right">
                                <span>阅读</span>
                                <span>370</span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>


            <div style="width: 495px;background-color: white;float: right">

                <div class="post-item">
                    <span style="font-size: 25px;padding-bottom: 7px;padding-top:20px;font-weight: 600;border-bottom: 0 none;margin-top: 0">
                        <a href="#" style="color: black;margin-top: 7px">最新</a>
                    </span>

                    <div>
                        <h5 style="margin-bottom: 0;padding-bottom: 5px">
                            <a id="new1" href="#" style=" color: black">● Vue技术栈源码学习</a>
                        </h5>
                        <span id="new-date1" style="color: #9A9A9A;margin-left: 10px">2020-05-25</span>
                        <p id="new-content1" style="margin:5px 0;padding:0;margin-left:10px;color: #2F2F2F">最近在学习 Vue
                            技术栈的源码。还在不断更新中，欢迎来提意见。</p>

                        <div style="margin-bottom:35px;margin-left: -10px">
                            <div class="col-md-2">
                                <img id="new-image1" src="{% static 'images/headProtraitSmall.png' %}" height="25"
                                     width="25"/>
                            </div>
                            <a id="new-author1" href="#"
                               style="color: black;margin-top: 10px;margin-left: -20px;width: auto"
                               class="col-md-1">Name</a>
                            <div id="new-view1" class="col-md-4" style="color: #2F2F2F;margin-top: 10px;float: right">
                                <span>阅读</span>
                                <span>370</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="post-item">
                    <div>
                        <h5 style="margin-bottom: 0;padding-bottom: 5px">
                            <a id="new2" href="#" style=" color: black">● Vue技术栈源码学习</a>
                        </h5>
                        <span id="new-date2" style="color: #9A9A9A;margin-left: 10px">2020-05-25</span>
                        <p id="new-content2" style="margin:5px 0;padding:0;margin-left:10px;color: #2F2F2F">最近在学习 Vue
                            技术栈的源码。还在不断更新中，欢迎来提意见。</p>

                        <div style="margin-bottom:35px;margin-left: -10px">
                            <div class="col-md-2">
                                <img id="new-image2" src="{% static 'images/headProtraitSmall.png' %}" height="25"
                                     width="25"/>
                            </div>
                            <a id="new-author2" href="#"
                               style="color: black;margin-top: 10px;margin-left: -20px;width: auto"
                               class="col-md-1">Name</a>
                            <div id="new-view2" class="col-md-4" style="color: #2F2F2F;margin-top: 10px;float: right">
                                <span>阅读</span>
                                <span>370</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<footer id="footer">
    <div id="copyright">Copyright ©2020</div>
    <div id="theme">
        Designed by <a href="#" target="_blank" rel="noopener">WengDifei XuJianan XueHongtao FengXuyang</a>
    </div>
</footer>

<div class="modal fade" id="loginModal" style="display:none;">
    <div class="modal-dialog modal-sm" style="width:540px;">
        <div class="modal-content" style="border:none;">
            <div class="col-left"></div>
            <div class="col-right">
                <div class="modal-header">
                    <button type="button" id="login_close" class="close" data-dismiss="modal"><span
                            aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="loginModalLabel" style="font-size: 18px;">登录</h4>
                </div>
                <div class="modal-body">
                    <section class="box-login v5-input-txt" id="box-login">
                        <form id="login_form" action="" method="post" autocomplete="off">
                            <input id="id_account_l" name="username" placeholder="用户名" type="text" lay-verify="required"
                                   class="layui-input">
                            <hr class="hr15">
                            <input id="id_password_l" name="password" lay-verify="required" placeholder="密码"
                                   type="password"
                                   class="layui-input">
                            <hr class="hr15">
                        </form>
                        <div id="switcherRegister">
                            <p class="good-tips marginB10"><a id="btnForgetpsw" class="fr">忘记密码？</a>还没有账号？<a
                                    id="btnRegister">立即注册</a></p>
                        </div>
                        <div id="switcherLogin" style="display:none;">
                            <p class="good-tips marginB10">已有账户？<a id="btnLogin">立即登录</a></p>
                        </div>
                        <div class="login-box marginB10">
                            <input id="login_btn" class="btn btn-micv5 btn-block globalLogin" value="登录" lay-submit
                                   lay-filter="login"
                                   style="width:100%;" type="submit">
                            <hr class="hr20">
                            <div id="login-form-tips" class="tips-error bg-danger" style="display: none;">错误提示</div>
                        </div>

                    </section>
                </div>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript" src="{% static 'background/lib/layui/layui.js' %}" charset="utf-8"></script>
<script type="text/javascript" src="{% static 'lib/showdown-1.9.1/dist/showdown.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/modal.js' %}"></script>
<script type="text/javascript" src="{% static 'js/script.js' %}"></script>
<script src="{% static 'lib/js/waterrippleeffect.min.js' %}"></script>
<script src="{% static 'js/header-bg.main.js' %}"></script>
<script src="{% static 'lib/js/cav.js' %}"></script>
<script src="{% static 'js/avatar-bg.main.js' %}"></script>
<script src="{% static 'js/base.js' %}"></script>
<script src="{% static 'js/front.js' %}"></script>
</body>
</html>
